import React, { useEffect, useState } from "react";
import { consultationService, handleApiResponse, handleApiError } from "../../../utils/api";
import { useParams, useNavigate } from "react-router-dom";
import TopNav from "../../../components/topNav";
import common_icon_attention_small_n from '../../../assets/icon/common_icon_attention_small_n.png'
import './index.css';

const MoreComment: React.FC = () => {
  const { id } = useParams();
  const [evaluations, setEvaluations] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (id) {
      const getDoctorEvaluations = async () => {
        setLoading(true);
        try {
          const response = await consultationService.getDoctorEvaluations({
            doctorId: id,
            page: 1,
            count: 20
          });
          const data = handleApiResponse(response) as any[];
          setEvaluations(data || []);
          console.log('医生评价:', data);
        } catch (error) {
          console.error('获取医生评价失败:', handleApiError(error));
          setEvaluations([]);
        } finally {
          setLoading(false);
        }
      };
      
      getDoctorEvaluations();
    }
  }, [id]);

  if (loading) {
    return (
      <div className="more-comment">
        <TopNav title="评论列表" />
        <div className="loading">加载中...</div>
      </div>
    );
  }

  return (
    <div className="more-comment">
      <TopNav title="评论列表" />
      
      <div className="comments-container">
        {evaluations.length > 0 ? (
          evaluations.map((evaluation, index) => (
            <div key={index} className="comment-item">
              <div className="comment-header">
                <img 
                  src={evaluation.headPic || common_icon_attention_small_n} 
                  alt="头像" 
                  className="comment-avatar" 
                />
                <div className="comment-user">
                  <div className="username">{evaluation.nickName || '匿名用户'}</div>
                  <div className="comment-time">
                    {evaluation.commentTime ? 
                      new Date(evaluation.commentTime).toLocaleDateString() : 
                      '未知时间'
                    }
                  </div>
                </div>
              </div>
              <div className="comment-content">
                {evaluation.content || '暂无评价内容'}
              </div>
            </div>
          ))
        ) : (
          <div className="comment-item">
            <div className="comment-content" style={{ textAlign: 'center', color: '#999' }}>
              暂无评价
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default MoreComment;
